<template>
  <div id="person-medical-info">
    <div class="table-box">
      <div class="table-title">
        <h1>患者基本信息</h1>
      </div>
      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <span>姓名</span>
          </div>
        </el-col>
        <el-col :span="4" class="column">
          <div class="grid-content bg-purple-light">
            <!-- <span>{{ patientUser.name }}</span> -->
            <span>{{ patientUser.name }}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <span>身份证</span>
          </div>
        </el-col>
        <el-col :span="4" class="column">
          <div class="grid-content bg-purple-light">
            <span>{{ patientUser.id_card }}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <span>性别</span>
          </div>
        </el-col>
        <el-col :span="4" class="column">
          <div class="grid-content bg-purple-light">
            <span>{{ patientUser.sex }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <span>民族</span>
          </div>
        </el-col>
        <el-col :span="4" class="column">
          <div class="grid-content bg-purple-light">
            <span>{{ patientUser.nation }}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <span>出生日期</span>
          </div>
        </el-col>
        <el-col :span="4" class="column">
          <div class="grid-content bg-purple-light">
            <span>{{ patientUser.birth }}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <span>家庭地址</span>
          </div>
        </el-col>
        <el-col :span="4" class="column">
          <div class="grid-content bg-purple-light">
            <span>{{ patientUser.address }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row style="border-bottom: 1px solid #f2f2f4;">
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <span>联系电话</span>
          </div>
        </el-col>
        <el-col :span="4" class="column">
          <div class="grid-content bg-purple-light">
            <span>{{ patientUser.tel }}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <span>邮箱</span>
          </div>
        </el-col>
        <el-col :span="12" class="column">
          <div class="grid-content bg-purple-light">
            <span>{{ patientUser.email }}</span>
          </div>
        </el-col>
      </el-row>
      <div class="table-title">
        <h1>医生基本信息</h1>
      </div>
      <el-row style="border-bottom: 1px solid #f2f2f4;">
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <span>主治医生姓名</span>
          </div>
        </el-col>
        <el-col :span="4" class="column">
          <div class="grid-content bg-purple-light">
            <span>{{ doctorInfo.name }}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <span>机构名</span>
          </div>
        </el-col>
        <el-col :span="4" class="column">
          <div class="grid-content bg-purple-light">
            <span>{{ doctorInfo.institution_name }}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <span>科室名</span>
          </div>
        </el-col>
        <el-col :span="4" class="column">
          <div class="grid-content bg-purple-light">
            <span>{{ doctorInfo.dept_name }}</span>
          </div>
        </el-col>
      </el-row>
      <div class="table-title">
        <h1>病历报告</h1>
      </div>
      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <span>患者主述</span>
          </div>
        </el-col>
        <el-col :span="20" class="column">
          <div class="grid-content bg-purple-light left">
            <el-input v-if="edit" :value="medicalRecordReport.own_report" v-model="medicalRecordReport.own_report"></el-input>
            <span v-if="!edit">{{ medicalRecordReport.own_report }}</span>
          </div>
        </el-col>
      </el-row>
      <!-- =============================== -->
      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <span>当前史</span>
          </div>
        </el-col>
        <el-col :span="20" class="column">
          <div class="grid-content bg-purple-light left">
            <el-input v-if="edit" :value="medicalRecordReport.present_history" v-model="medicalRecordReport.present_history"></el-input>
            <span v-if="!edit">{{ medicalRecordReport.present_history }}</span>
          </div>
        </el-col>
      </el-row>
      <!-- =============================== -->
      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <span>既往史</span>
          </div>
        </el-col>
        <el-col :span="20" class="column">
          <div class="grid-content bg-purple-light left">
            <el-input v-if="edit" :value="medicalRecordReport.past_history" v-model="medicalRecordReport.past_history"></el-input>
            <span v-if="!edit">{{ medicalRecordReport.past_history }}</span>
          </div>
        </el-col>
      </el-row>
      <!-- =============================== -->
      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <span>头颈检查</span>
          </div>
        </el-col>
        <el-col :span="20" class="column">
          <div class="grid-content bg-purple-light left">
            <el-input v-if="edit" :value="medicalRecordReport.head_neck" v-model="medicalRecordReport.head_neck"></el-input>
            <span v-if="!edit">{{ medicalRecordReport.head_neck }}</span>
          </div>
        </el-col>
      </el-row>
      <!-- =============================== -->
      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <span>呼吸系统检查</span>
          </div>
        </el-col>
        <el-col :span="20" class="column">
          <div class="grid-content bg-purple-light left">
            <el-input v-if="edit" :value="medicalRecordReport.respiratory_sys" v-model="medicalRecordReport.respiratory_sys"></el-input>
            <span v-if="!edit">{{ medicalRecordReport.respiratory_sys }}</span>
          </div>
        </el-col>
      </el-row>
      <!-- =============================== -->
      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <span>循环系统检查</span>
          </div>
        </el-col>
        <el-col :span="20" class="column">
          <div class="grid-content bg-purple-light left">
            <el-input v-if="edit" :value="medicalRecordReport.circulatory_sys" v-model="medicalRecordReport.circulatory_sys"></el-input>
            <span v-if="!edit">{{ medicalRecordReport.circulatory_sys }}</span>
          </div>
        </el-col>
      </el-row>
      <!-- =============================== -->
      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <span>消化系统检查</span>
          </div>
        </el-col>
        <el-col :span="20" class="column">
          <div class="grid-content bg-purple-light left">
            <el-input v-if="edit" :value="medicalRecordReport.digestive_sys" v-model="medicalRecordReport.digestive_sys"></el-input>
            <span v-if="!edit">{{ medicalRecordReport.digestive_sys }}</span>
          </div>
        </el-col>
      </el-row>
      <!-- =============================== -->
      <el-row style="border-bottom: 1px solid #f2f2f4;">
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <span>医生报告</span>
          </div>
        </el-col>
        <el-col :span="20" class="column">
          <div class="grid-content bg-purple-light left">
            <el-input v-if="edit" :value="medicalRecordReport.doc_report" v-model="medicalRecordReport.doc_report"></el-input>
            <span v-if="!edit">{{ medicalRecordReport.doc_report }}</span>
          </div>
        </el-col>
      </el-row>
      <div class="confirm-btn">
        <el-button v-if="!show" type="primary" @click="confirmBtn()">确认提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { medicalRecord } from '@/api';
export default {
  name: 'PersonMedicalInfo',
  data() {
    return {
      show : localStorage.getItem("role") === "1",
      name: '1213',
      id: null,
      // tableData: [
      //   {
      //     name: '小梁'
      //   }
      // ],
      // 患者信息
      patientUser: {
        name: null,
        id_card: null,
        sex: null,
        nation: null,
        birth: null,
        address: null,
        tel: null,
        email: null,
      },
      // 医生信息
      doctorInfo: {
        name: null,
        institution_name: null,
        dept_name: null,
      },
      medicalRecordReport: {
        own_report: null,
        present_history: null,
        past_history: null,
        head_neck: null,
        respiratory_sys: null,
        circulatory_sys: null,
        digestive_sys: null,
        doc_report: null,
      },
      edit: false,
      type: null,
    }
  },

  created() {
    console.log(this.$route.query);
    this.id = this.$route.query.id;
    this.type = this.$route.query.type;
    if (this.type === 'edit') {
      this.edit = true;
    }
    console.log('患者信息：', this.patientUser);
    this.initData()
  },
  methods: {
    initData() {
      medicalRecord.getMedicalRecordDetail({ medical_records_id: this.id }).then(res => {
        console.log(res);
        this.patientUser = res.data.data.patientUser;
        this.doctorInfo = res.data.data.instituteUserVO;
        if (!this.edit) {
          this.medicalRecordReport = res.data.data.mrMinioStore;
        }
        console.log(this.patientUser);
        // this.name = this.patientUser.name;
      })
    },

    // 确认提交
    confirmBtn() {
      console.log(this.medicalRecordReport);
      const data = {
        medical_records_id: this.id,
        mrMinioStore: {
          ...this.medicalRecordReport,
        }

      }
      medicalRecord.inputPatientMedicalReport(data).then(res => {
        console.log(res);
        this.$message.success('病历提交成功');
        this.$router.go(-1);
      })
    },
  }
}
</script>

<style lang="less">
#person-medical-info {
  .table-box {

    .table-title {
      padding: 12px 0px;
    }

    .separate {
      width: 100%;
      height: 86px;
    }

    .el-row {
      // padding: 12px 0px;
      border-top: 1px solid #f2f2f4;
      // border-bottom: 1px solid #f2f2f4;
      border-left: 1px solid #f2f2f4;

      // height:48px;
      .el-col {
        // border-right: 2px solid #f2f2f4;
        text-align: center;
        position: relative;
        height: 64px;
        line-height: 64px;
        box-sizing: border-box;

        .left {
          text-align: left;
          // padding-left: 12px;
          padding-left: 12px;
          padding-right: 12px;
          box-sizing: border-box;
        }
      }

      .column {
        background-color: #f5f6fa;
      }

      .el-col::after {
        content: '';
        position: absolute;
        width: 1px;
        height: 100%;
        // padding: 12px 0px;
        background-color: #f2f2f4;
        right: 0px;
        top: 0px;
      }
    }

    .confirm-btn {
      margin-top: 30px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>